<template>
  <div>
    <div class="area-header">
      <span class="area-header-title">{{ $t('出资人选择') }}</span>
    </div>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      tooltip-effect="dark"
      :data="fundInvestorDataList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" :selectable="multiOperationChoice" />
      <el-table-column :label="$t('出资人类型')" align="center" prop="type" :formatter="customerTypeFormat" />
      <el-table-column :label="$t('出资人姓名')" align="center" prop="userName">
        <template slot-scope="scope">
          <el-link :underline="false" type="primary" @click="showLpBaseInfo(scope.row)">{{ scope.row.userName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('负责人')" align="center" prop="investPersonCharge" />
      <el-table-column :label="$t('出资人电话')" align="center" prop="investPhone" />
      <el-table-column :label="$t('出资人邮箱')" align="center" prop="investEmail" />
    </el-table>
    <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 10px">
      <el-button @click="cancel()">取消</el-button>
      <el-button type="primary" @click="toggleSelection()">确定</el-button>
    </div>
    <!-- 添加或修改客户管理对话框 -->
    <el-dialog :title="$t('出资人信息')" :visible.sync="investFormOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <fundInvestorForm ref="fundInvestorForm" @sendInvestData="sendInvestData" />
    </el-dialog>
  </div>
</template>

<script>
import { findInvestByFundId } from '@/api/fund/investor/fundInvestor'
import fundInvestorForm from '@/views/fund/investor/fundInvestorForm.vue'
export default {
  name: 'FundInverstorTable',
  components: {
    fundInvestorForm
  },
  data() {
    return {
      ids: [],
      loading: false,
      fundInvestorDataList: [],
      multipleSelection: [],
      // 出资人类型字典
      customerTypeOptions: [],
      // 页面选中的行
      parentChoiceData: undefined,
      investFormOpen: false
    }
  },
  created() {
    this.getDicts('lp_type').then(response => {
      response.data.forEach(item => {
        this.customerTypeOptions.push(item)
      })
      this.getDicts('main_body_type').then(response => {
        response.data.forEach(item => {
          this.customerTypeOptions.push(item)
        })
      })
    })
  },

  methods: {
    // 出资人类型字典翻译
    customerTypeFormat(row) {
      return this.selectDictLabel(this.customerTypeOptions, row.type)
    },
    /**
     * @param fundId  基金ID
     * @param choiceData 选中的行数据
     */
    init(fundId, choiceData) {
      this.loading = true
      this.parentChoiceData = choiceData
      if (fundId !== null && fundId !== undefined) {
        findInvestByFundId(fundId).then(response => {
          this.fundInvestorDataList = response.data
          // 回显时, 选中已选则的行
          if (this.parentChoiceData !== undefined && this.fundInvestorDataList !== undefined && this.fundInvestorDataList !== null) {
            this.fundInvestorDataList.forEach(main => {
              this.parentChoiceData.forEach(sub => {
                if (main.id === sub.tempId) {
                  this.$nextTick(() => {
                    this.$refs.multipleTable.toggleRowSelection(main, true)
                  })
                }
              })
            })
          }
          this.loading = false
        })
      } else {
        // this.reset()
        this.loading = false
      }
    },
    toggleSelection() {
      if (this.multipleSelection) {
        this.multipleSelection.forEach(item => {
          // 联系方式
          var contact = item.investPhone
          if (contact === undefined || contact === null || contact === '') {
            contact = item.investEmail
          }
          if (item.type === 'GR') {
            // 添加个人
            this.$emit('addPersonInvest', item.id, item.investPersonCharge, contact)
          } else {
            // 添加企业
            this.$emit('addEnterpriseInvest', item.id, item.userName, item.investPersonCharge, contact)
          }
        })
      }
      // 将选中的和页面上的对比. 看下删掉了那个把页面上选中的也去掉
      if (this.parentChoiceData) {
        var deleteRowData = []
        this.parentChoiceData.forEach(item => {
          if (!this.multipleSelection.find(obj => (obj.id === item.tempId) || obj.tempId === item.tempId)) {
            deleteRowData.push(item.tempId)
          }
        })
        this.$emit('deleteRowData', deleteRowData)
      }
      this.cancel()
    },

    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId)
      this.multipleSelection = selection
    },
    cancel() {
      this.$parent.$parent.fndTableformOpen = false
      this.$parent.$parent.$parent.$parent.fundTableformOpen = false
      this.$emit('closeInvestPage', undefined)
    },
    showLpBaseInfo(row) {
      console.log('打开出资人页面')
      this.investFormOpen = true
      this.$nextTick(() => {
        this.$refs.fundInvestorForm.currentFundId = row.fundId
        this.$refs.fundInvestorForm.init({ id: row.id, userName: row.userName })
      })
    },
    sendInvestData(data) {
      if (this.fundInvestorDataList !== undefined && this.fundInvestorDataList !== null && this.fundInvestorDataList.length > 0) {
        this.fundInvestorDataList.forEach(item => {
          if (item.id === data.id) {
            item.investPhone = data.investPhone
            item.investEmail = data.investEmail
            item.investPersonCharge = data.investPersonCharge
          }
        })
      }
    },
    // 没有人名和手机号的不许选择
    multiOperationChoice(row) {
      return !(row.investPersonCharge === undefined || row.investPersonCharge === null || row.investPersonCharge === '')
    }
  }
}
</script>

